<template>
    <Row :gutter="30">
        <Col span="8">
            <Card :bordered="false"  style="height: 170px;">
                <p slot="title" style="font-size: large;">交易金额</p>
                <p style="margin-bottom: 10px;"><span style="font-size: xx-large;color: red;">{{jymoney}} </span>元</p>
                <!-- <Button type="primary" icon="ios-search" @click="modal1 = true">查看</Button> -->
                <br>
            </Card>
        </Col>
        <Col span="8">
            <Card :bordered="false"  style="height: 170px;">
                <p slot="title" style="font-size: large;">可提现金额</p>
                <p style="margin-bottom: 10px;"><span style="font-size: xx-large;color: red;">{{ktxmoney}} </span>元</p>
                <!-- <Button type="primary" icon="ios-search" @click="modal1 = true">查看</Button> -->
                <div :hidden="this.showmoney==0 ? true : false"><Button type="primary" icon="logo-usd" @click="getmoney">提现</Button></div>
            </Card>
        </Col>
        <Col span="8">
            <Card :bordered="false" style="height: 170px;">
                <p slot="title" style="font-size: large;">已提现金额</p>
                <p style="margin-bottom: 10px;"><span style="color: red;font-size: xx-large;">{{ytxmoney}} </span>元</p>
                <Button type="primary" icon="ios-search" @click="lookmoney" >查看明细</Button>
                <br>
            </Card>
        </Col>
        <Col span="30">
            <Card :bordered="false" style="margin-top: 200px;">
              <Row class="form-row">
                <Form label-position="right" :label-width="90" inline>
                    <FormItem label="起始日期">
                      <DatePicker @on-change="handleChange" format="yyyy-MM-dd" type="daterange" confirm placement="bottom-end" placeholder="请选择起始日期" style="width: 250px" v-model="date"></DatePicker>
                    </FormItem>
                    <FormItem label="物业">
                      <Select v-model="deptId" placeholder="请选择物业" size="large" @on-change="Property" style="width: 250px">
                        <Option v-for="item in deptList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="小区">
                      <Select v-model="houseId" placeholder="请选择小区" size="large" style="width: 250px" clearable>
                        <Option v-for="item in houseList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem>
                      <Button type="primary" icon="ios-search" @click="loadData()">查询</Button>
                    </FormItem>
                  </Form>
                </Row>
                  <Row style="margin:0 0 20px 0 ">
                      <Button type="primary" icon="ios-redo-outline" @click="exportExcel">导出为Csv文件</Button>
                  </Row>
            </Card>
        </Col>
        <Col span="30" style="margin-top: 10px;">
            <Card>
              <p slot="title" style="font-size: large;">总金额为：{{allmoney}}</p>
                <Row>
                    <Col>
                        <Table ref="table" border :data="tableData" :columns="columns" stripe >
                            <!-- 操作 -->
                            <template slot="action" slot-scope="props">
                                <!-- <Poptip confirm title="确定删除?" transfer @on-ok="handleDelete(props.id)" >
                                    <Button type="primary" size="small">删除</Button>
                                </Poptip>
                            <Divider type="vertical" /> -->
                            <!-- <Button type="warning" @click="handleAdd(props.id)" size="small">修改</Button> -->
                                <Button type="primary" size="small" @click="detail(props.housingId,props.theDate)">详细情况</Button>
                            </template>
                        </Table>
                        <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'></Page>
                    </Col>
                </Row>
            </Card>
            <Modal
                v-model="modal1"
                title="提现金额">
                <p>Content of dialog</p>
                <p>Content of dialog</p>
                <p>Content of dialog</p>
            </Modal>
            <Modal
                v-model="modal2"
                title="可提现金额"
                @on-ok="ok"
                @on-cancel="cancel">
                <p>可提现金额为{{ktxmoney}}</p>
            </Modal>
            <Modal
                v-model="modal3"
                title="详细情况">
                <Table ref="table2" border :data="tableData2" :columns="columns2" stripe ></Table>
                <Page style="margin: 10px 0;" :total="pageTotal2" :current="pageNum2" :page-size="pageSize2" show-total show-sizer show-elevator @on-change="handlePage2" @on-page-size-change='handlePageSize2'></Page>
            </Modal>
            <Modal
                v-model="modal4"
                title="提现明细">
                <Table ref="table1" border :data="tableData1" :columns="columns1" stripe ></Table>
                <Page style="margin: 10px 0;" :total="pageTotal1" :current="pageNum1" :page-size="pageSize1" show-total show-sizer show-elevator @on-change="handlePage1" @on-page-size-change='handlePageSize1'></Page>
            </Modal>
        </Col>
    </Row>
</template>
<script>
    import { getUserInfo } from "@/api/user";
    //打开页面，详细情况
    let detail = function(housingId,theDate) {
      console.log(theDate)
      this.hId=housingId;
      this.Hdate=theDate;
      let params = {};
      params.housingId = housingId;
      params.theDate = theDate;
      params.pageNum = this.pageNum2;
      params.pageSize = this.pageSize2;
      this.postRequest("/api/kdReport/info",params).then(res => {
        console.log(res)
        if (res.code == 20000) {
          this.modal3 = true;
          this.tableData2 = res.data.list;
          this.pageTotal2 = res.data.total;
        } else {
          this.$Message.error({
            content: res.message,
            duration: 5
          });
        }
      });
    };
    //物业变化
    let Property=function(value){
      console.log("选中了"+value);
      this.getRequest("/api/kdReport/houseList?deptId="+value).then(res => {
          console.log(res)
          this.houseList = res.data;
      });
    }
    //查看提现明细
    let lookmoney=function(){
      let params = {};
      params.pageNum = this.pageNum1;
      params.pageSize = this.pageSize1;
      this.postRequest("/api/kdReport/alreadyPresented",params).then(res => {
        console.log(res)
        if (res.code == 20000) {
          this.modal4=true;
          this.tableData1 = res.data.list;
          this.pageTotal1 = res.data.total;
        } else {
          this.$Message.error({
            content: res.message,
            duration: 5
          });
        }
      });
    }
    //提现金额
    let getmoney=function(){
      this.postRequest("/api/housing/housingWithdraw").then(res => {
        console.log(res)
        if(res.code=="20000"){
          this.$Message.info('提现已提交，请等待审核');
        }else{
          this.$Message.info('提现失败');
        }
      })
    }
    export default {
        name: 'homeBalance',
        data() {
            return {
                modal1: false,
                modal2:false,
                modal3:false,
                modal4:false,
                showmoney:0,
                jymoney:0,
                ytxmoney:0,
                ktxmoney:0,
                tableData: [],
                tableData1: [],
                tableData2: [],
                name: "",
                phone: "",
                date:"",
                detail1:"",
                dataValue:null,//日期
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //页码
                pageNum1: 1,
                //每页数量
                pageSize1: 5,
                //总数
                pageTotal1: 0,
                //页码
                pageNum2: 1,
                //每页数量
                pageSize2: 5,
                //总数
                pageTotal2: 0,
                deptList: [],//物业列表
                houseList:[],//小区
                houseId:null,
                deptId:null,
                allmoney:0,
                hId:null,
                Hdate:null,
                columns: [
                {
                  title: "具体日期",
                  key: "createTime"
                },
                {
                  title: "物业",
                  key: "deptName"
                },
                {
                  title: "小区",
                  key: "houseName"
                },
                {
                  title: "交易金额",
                  key: "amount"
                },
                {
                  key: "action",
                  title: "操作",
                  width: 150,
                  align: "center",
                  render: (h, params) => {
                    return h(
                      "div",
                      this.$refs.table.$scopedSlots.action({
                        id: params.row.id,
                        housingId:params.row.housingId,
                        theDate:params.row.createTime
                      })
                    );
                  }
                }
              ],
              columns1: [
                {
                  title: "具体日期",
                  key: "createTime"
                },
                {
                  title: "物业",
                  key: "deptName"
                },
                {
                  title: "小区",
                  key: "houseName"
                },
                {
                  title: "提现金额",
                  key: "amount"
                }],
                columns2: [
                {
                  title: "具体日期",
                  key: "createTime"
                },
                {
                  title: "快递单号",
                  key: "code"
                },
                {
                  title: "金额",
                  key: "amount"
                }]
            }
        },
        created:function(){
          console.log(this.$store.state.user.access[0])
          if (this.$store.state.user.access[0]=="property_admin"||this.$store.state.user.access[0]=="property") {
            this.showmoney=1;
          }
          //与后台交换数据,交易金额 余额 可提现金额,物业列表
          this.postRequest("/api/kdReport/propertyList").then(res => {
            console.log(res)
            if (res.code == 20000) {
              this.deptList=res.data.deptList;
              this.jymoney= res.data.totalAmont
              this.ytxmoney= res.data.alreadyBalance
              this.ktxmoney= res.data.accountBalance
              if (this.ktxmoney==0) {
                this.showmoney=0;
              }
            } else {
              this.$Message.error({
                content: res.message,
                duration: 5
              });
            }
          });
        },
         methods: {
            getmoney,
            lookmoney,
            detail,
            Property,//物业
            //打开页面，搜索
            loadData() {
              let params = {};
              if(this.dataValue){
                console.log(this.dataValue[0])
                params.startDate = this.dataValue[0];
                params.endDate = this.dataValue[1];
              }
              params.pageNum = this.pageNum;
              params.pageSize = this.pageSize;
              params.deptId = this.deptId;
              params.housingId = this.houseId;
              this.postRequest("/api/kdReport/pcCapitalFlowlist", params).then(res => {
                console.log(res)
                if(res.code=="20000"){
                  this.tableData = res.data.pageInfo.list;
                  this.pageTotal = res.data.pageInfo.total;
                  this.allmoney=res.data.totalMoney;
                }else{
                  this.$Message.info(res.message);
                }
              });
            },
            ok () {
                this.$Message.info('提现成功');
            },
            cancel () {
                this.$Message.info('取消提现');
            },
            //导出表格
            exportExcel() {
                this.$refs.table.exportCsv({
                    filename: `table-${(new Date()).valueOf()}.csv`
                })
            },
            //日期转换
            handleChange(daterange) {
              this.dataValue = daterange;
            },
            handlePage(value) {
              this.pageNum = value;
              this.loadData();
            },
            handlePageSize(value) {
              this.pageSize = value;
              this.loadData();
            },
            handlePage1(value) {
              this.pageNum1 = value;
              let params={};
              params.pageNum = this.pageNum1;
              params.pageSize = this.pageSize1;
              this.postRequest("/api/kdReport/alreadyPresented",params).then(res => {
                console.log(res)
                this.tableData1 = res.data.list;
                this.pageTotal1 = res.data.total;
              });
            },
            handlePageSize1(value) {
              this.pageSize1 = value;
              let params={};
              params.pageNum = this.pageNum1;
              params.pageSize = this.pageSize1;
              this.postRequest("/api/kdReport/alreadyPresented",params).then(res => {
                console.log(res)
                this.tableData1 = res.data.list;
                this.pageTotal1 = res.data.total;
              });
            },
            handlePage2(value) {
              this.pageNum2 = value;
              let params={};
              params.housingId = this.hId;
              params.theDate = this.Hdate;
              params.pageNum = this.pageNum2;
              params.pageSize = this.pageSize2;
              this.postRequest("/api/kdReport/info",params).then(res => {
                console.log(res)
                if (res.code == 20000) {
                  this.tableData2 = res.data.list;
                  this.pageTotal2 = res.data.total;
                } else {
                  this.$Message.error({
                    content: res.message,
                    duration: 5
                  });
                }
              });
            },
            handlePageSize2(value) {
              this.pageSize2 = value;
              let params={};
              params.housingId = this.hId;
              params.theDate = this.Hdate;
              params.pageNum = this.pageNum2;
              params.pageSize = this.pageSize2;
              this.postRequest("/api/kdReport/info",params).then(res => {
                console.log(res)
                if (res.code == 20000) {
                  this.tableData2 = res.data.list;
                  this.pageTotal2 = res.data.total;
                } else {
                  this.$Message.error({
                    content: res.message,
                    duration: 5
                  });
                }
              });
            }
        }
    }
</script>
